<template>
    <div>
        <van-row @click="openModal">
            <van-col span="6">
                <img :src="avatarSrc" alt />
            </van-col>
            <van-col span="15">{{nickname}}</van-col>
            <van-col span="3">
                <van-icon name="arrow" />
            </van-col>
        </van-row>
        <van-grid :column-num="3" square>
            <van-grid-item icon="bag-o" text="我的订单" />
            <van-grid-item icon="bill-o" text="优惠券" />
            <van-grid-item icon="balance-pay" text="礼品卡" />
            <van-grid-item icon="star-o" text="我的收藏" />
            <van-grid-item icon="flag-o" text="我的足迹" />
            <van-grid-item icon="vip-card-o" text="会员福利" />
            <van-grid-item icon="guide-o" text="地址管理" />
            <van-grid-item icon="warning-o" text="账号安全" />
            <van-grid-item icon="service-o" text="联系客服" />
            <van-grid-item icon="question-o" text="帮助中心" />
            <van-grid-item icon="smile-comment-o" text="意见反馈" />
        </van-grid>
        <transition name="van-fade">
            <div class="login-modal" v-show="isShowModal">
                <div class="close-modal" @click="isShowModal=!isShowModal"></div>
                <van-form @submit="onSubmit" class="login-form">
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <div style="margin: 16px;">
                        <van-button round block plain type="info" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </transition>
    </div>
</template>

<script>
    import {
        GoLogin
    } from "@/request/api"
    export default {
        data() {
            return {
                avatarSrc: require("../assets/avatar.png"),
                username: '',
                password: '',
                isShowModal: false,
                nickname: "用户登录"
            }
        },
        created() {
            // 创建之后，通过localStroage中token值判断用户有没有登录
            if (localStorage.getItem("token")) {
                // 已经有登录状态，渲染用户信息
                let userInfo = JSON.parse(localStorage.getItem("userInfo"));
                this.nickname = userInfo.nickname
                this.avatarSrc = userInfo.avatar
            }
        },
        methods: {
            onSubmit(val) {
                let username = val["用户名"]
                let pwd = val["密码"]
                GoLogin({
                        username,
                        pwd
                    })
                    .then(res => {
                        if (res.errno == 0) {
                            //  登入成功
                            this.$toast.success('登录成功');
                            localStorage.setItem("token", res.data.token);
                            localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
                            setTimeout(() => {
                                this.isShowModal = !this.isShowModal
                                // 向页面渲染用户信息
                                this.nickname = res.data.userInfo.nickname
                                this.avatarSrc = res.data.userInfo.avatar
                            }, 1000)

                        }
                    })
            },
            // 打开遮罩登入页面
            openModal() {
                // 判断用户是否登录
                let token = localStorage.getItem("token")
                if (token) {
                    return
                }
                this.isShowModal = !this.isShowModal
            }
        }
    }
</script>

<style lang="less" scoped>
    .login-modal {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 99;

        .login-form {
            width: 90%;
            background-color: #fff;
            padding-bottom: .2rem;
            position: absolute;
            left: 50%;
            top: 35%;
            margin-left: -45%;
        }

        .close-modal {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
        }
    }

    .van-row {
        padding: 0.2rem 4%;
        background: #333;
        color: #fff;

        .van-col {
            line-height: 0.7rem;
            font-size: 0.18rem;

            img {
                width: 0.7rem;
                border-radius: 50%;
                display: block;
            }

            &:last-child {
                text-align: right;
            }
        }
    }
</style>